<template>
	<div>
		<CommonCard title="今日交易用户数" :value="value">
			<template>
				<v-chart :options="getOptions()" />
			</template>
			<template slot="footer">
				退货率
				<span class="emphasis">5.94%</span>
			</template>
		</CommonCard>
	</div>
</template>
<script>
import CommonCard from '../CommonCard/index';
export default {
	name: 'TotalPayUser',
	components: {
		CommonCard,
	},
	data() {
		return {
			value: `${this.thousands('3498309')}`,
		};
	},
	methods: {
		getOptions() {
			return {
				color: ['#3398DB'], // 图表颜色
				xAxis: {
					type: 'category',
					data: ['00:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
					show: false, // 隐藏x
				},
				yAxis: {
					show: false, // 隐藏x
				},
				grid: {
					top: 0,
					left: 0,
					bottom: 0,
					right: 0,
				},
				tooltip: {
					trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'line', // 默认为直线，可选为：'shadow' | 'shadow'
					},
				},
				series: {
					name: '直接访问',
					type: 'bar',
					barWidth: '60%', // 图表宽度
					data: [100, 190, 120, 90, 150, 100, 120, 90, 150, 70, 70, 170, 70],
				},
			};
		},
	},
};
</script>
